import React, { useEffect, useState } from 'react';
import { Carousel } from 'antd';
import './index.scss'
import { getCaousel } from '../../api'

interface data {
  id : string,
  url : string
}

const CarouselCom: React.FC = () => {
  const [data,setData] = useState<data[]>([])
  useEffect(()=> {
    const gettest = async ()=> {
      const res = await getCaousel();
      setData(res as unknown as data[]);
    }
    gettest()
  },[])
  return(
    <div className="carousel-container">
      <Carousel autoplay arrows autoplaySpeed={5000}>
        {data.map((item,index)=> {
          return <div key={index}>
            <img src={item.url} alt=''/>
          </div>
        })}
      </Carousel>
    </div>
  );
}

export default CarouselCom;